<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css" />
<link type="text/css" href="css/styleSlider.css" rel="stylesheet" />

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			$(".main_visual").hover(function(){
				$("#btn_prev,#btn_next").fadeIn()
			},function(){
				$("#btn_prev,#btn_next").fadeOut()
			});
			$dragBln = false;
			$(".main_image").touchSlider({
				flexible : true,
				speed : 200,
				btn_prev : $("#btn_prev"),
				btn_next : $("#btn_next"),
				paging : $(".flicking_con a"),
				counter : function (e){
					$(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
				}
			});
			$(".main_image").bind("mousedown", function() {
				$dragBln = false;
			});
			$(".main_image").bind("dragstart", function() {
				$dragBln = true;
			});
			$(".main_image a").click(function(){
				if($dragBln) {
					return false;
				}
			});
			timer = setInterval(function(){
				$("#btn_next").click();
			}, 5000);

			$(".main_visual").hover(function(){
				clearInterval(timer);
			},function(){
				timer = setInterval(function(){
					$("#btn_next").click();
				},5000);
			});
			$(".main_image").bind("touchstart",function(){
				clearInterval(timer);
			}).bind("touchend", function(){
				timer = setInterval(function(){
					$("#btn_next").click();
				}, 5000);
			});
			i = 1;
			getInfo();
		});
		// 向从container添加数据
		$(window).scroll(function(){getInfo();});
		function getInfo() { 
			var winH = $(window).height();//页面可视区域高度 
		    var pageH = $(document.body).height(); //页面总高度 
		    var scrollT = $(window).scrollTop(); //滚动条top 
		    var aa = (pageH-winH-scrollT)/winH;
		    wait = false;
		    while (wait);
		    var nowait = true;
		    if(aa<0.02 && nowait){
		    	wait = true;
		        nowait=false;
		        $.getJSON("HomeServlet",{page:i},function(json){
		        	if (json){
		        		for (var i = 0; i < json.length; i++){
		        			json[i]['message']
		        		}
	                    $.each(json,function(index,array){ 
		        			var str = "";
	    					str += "<div class=\"taskarea\" onclick=\"location='task_message.html?id="+array['id']+"'\">" + 
	    					"		<div class=\"toptaskarea\">" + 
	    					"			<div class=\"fl head1\">" + 
	    					"				<img src=\"image/"+array['customer']['sex']+".png\" style=\"margin-top:40px;\"/>" + 
	    					"			</div>" + 
	    					"			<div class=\" fl content\">" + 
	    					"				<div class=\"message\">" + 
	    					"					<div class=\" fl name\">"+array['customer']['username']+"</div>" + 
	    					"					<div class=\"fr time\">"+calculateTime(array['time'])+"</div>" + 
	    					"					<div class=\"clear\"></div>" + 
	    					"				</div>" + 
	    					"				<div class=\"textareacontent\">"+array['message']+"</div>" + 
	    					"				<div class=\"money\">" + 
	    					"					<span class=\"fl font2\">"+array['money']+"</span><span class=\"fl font3\">元</span><span class=\"fr font2\">"+array['status']+"</span>" + 
	    					"					<div class=\"clear\"></div>" + 
	    					"				</div>" + 
	    					"			</div>" + 
	    					"			<div class=\"clear\"></div>" + 
	    					"		</div>" + 
	    					"		<div class=\"bottomtaskarea\">" + 
	    					"			<div class=\" fl font4\">送达：</div>" + 
	    					"			<div class=\"fl font5\">"+array['address']+"</div>" + 
	    					"		</div>" + 
	    					"	</div>";
	                        $("#container").append(str); 
	                    });
		        	}
		        }); 
				nowait = true;
				wait = false;
				i++;
		     } 
		}
		
		// 计算时间差
		function calculateTime(startTime){
			var date1= startTime;  //开始时间  
		    var date2 = new Date();    //结束时间  
		    var date3 = date2.getTime() - new Date(date1).getTime();   //时间差的毫秒数 
		    
		    //计算出相差天数  
		    var days=Math.floor(date3/(24*3600*1000))
		  
		    //计算出小时数  
		    var leave1=date3%(24*3600*1000)    //计算天数后剩余的毫秒数  
		    var hours=Math.floor(leave1/(3600*1000))  
		    
		    //计算相差分钟数  
		    var leave2=leave1%(3600*1000)        //计算小时数后剩余的毫秒数  
		    var minutes=Math.floor(leave2/(60*1000))  
		    
		    var str = "刚刚"
		    if (days > 1){
		    	str = days + "天前"
		    }else if (hours > 1){
		    	str = hours + "小时前"
		    }else if(minutes > 1){
		    	str = minutes + "分钟前"
		    }
		    return str;
		}
	</script>
</head>
<body>
	<div class="main_visual">
		<div class="main_image">
			<ul>
				<li><span class="img_3"></span></li>
				<li><span class="img_4"></span></li>
				<li><span class="img_1"></span></li>
				<li><span class="img_2"></span></li>
				<li><span class="img_5"></span></li>
			</ul>
			<a href="javascript:;" id="btn_prev"></a> <a href="javascript:;"
				id="btn_next"></a>
		</div>
	</div>

	<div class="topbox">
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/food.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">美食</div>
		</div>
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/shop.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">超市</div>
		</div>
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/fruit.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">鮮果购</div>
		</div>
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/drink.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">夏日畅饮</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="bottombox">
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/hotel.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">酒店</div>
		</div>
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/run.png" style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">快递跑腿</div>
		</div>
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/local.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">本地景点</div>
		</div>
		<div class="fl smalltopbox">
			<div class="img">
				<img src="image/cheap.png"
					style="margin-left: 60px; margin-top: 40px">
			</div>
			<div class="font">优惠买单</div>
		</div>
		<div class="clear"></div>
	</div>
	<div class="fill"></div>
<div id="container">
</div>
	<div class="tabHost">
		<div class="fl tab">
			<img src="image/tab01.png" style="margin-left: 80px" />
			<div class="font6">首页</div>
		</div>
		<div onclick="location='Release_task.html'" class="fl tab">
			<img src="image/tab2.png" style="margin-left: 80px" />
			<div class="font6">发布任务</div>
		</div>
		<div onclick="location='Order.html'" class="fl tab">
			<img src="image/tab4.png" style="margin-left: 80px" />
			<div class="font6">订单</div>
		</div>
		<div onclick="location='Person.html'" class="fl tab">
			<img src="image/tab3.png" style="margin-left: 80px" />
			<div class="font6">个人中心</div>
		</div>
		<div class="clear"></div>
	</div>
</body>
</html>